<template>
	<ul>
		<template v-for="(item,index) in listData">
			<li v-if="item.child.length <= 0" :key="index" :class="{'primary-menu':item.type==='primary'}">
				<a class="ggg_color">
					<span v-if="!item.edit">{{item.title}}</span>
					<input v-if="item.edit" type="text" :value="item.title">
					<!-- <el-input placeholder="请输入内容" v-model="item.title" clearable></el-input> -->
					<button v-if="item.edit" @click="confirmUpdate($event,index)">确认</button>
					<button v-if="item.edit" @click="update($event,index)">取消</button></a>
				<div class="btn-group">
					<button v-if="!item.edit" @click="update($event,index)">修改</button>
					<button @click="deleteFn(index)">删除</button>
					<button @click="addChild(index)">添加子项</button>
				</div>
			</li>
			<li v-else :class="{'primary-menu':item.type==='primary'}" :key="index">
				<a class=" ggg_color color-blue" @click="showChildMenu(index)">
					<span v-if="!item.edit">{{item.title}}</span>
					<input v-if="item.edit" type="text" :value="item.title">
					<!-- <el-input placeholder="请输入内容" v-model="item.title" clearable></el-input> -->
					<button v-if="item.edit" @click="confirmUpdate($event,index)">确认</button>
					<button v-if="item.edit" @click="update($event,index)">取消</button>
				</a>
				<div class="btn-group">
					<button v-if="!item.edit" @click="update($event,index)">修改</button>
					<button @click="deleteFn(index)">删除</button>
					<button @click="addChild(index)">添加子项</button>
				</div>
				<Tree v-if="item.expansion" :listData="item.child"></Tree>
			</li>
		</template>
		<button @click="add()">添加同级项</button>

	</ul>

</template>
<script>
	import Tree from './tree.vue'

	export default {
		components: {
			Tree
		},

		data() {
			return {
				listData: [{
					title: "一级菜单",
					expansion: true,
					type: 'primary',
					child: [],
				}]
			}
		},
		methods: {
			addNewBuilding() {
				this.listData.forEach((item) => {
					item.expansion = false;
				});
				console.log(this.listData)

				setTimeout(() => {
					this.listData.push({
						title: "未命名",
						expansion: true,
						type: 'primary',
						child: [],
					})
				}, 800);
			},
			showChildMenu(index) {
				console.log(index);
				let temp = this.listData[index]
				temp.expansion = !temp.expansion;
				this.listData.splice(index, 1, temp);
			},
			deleteFn(index) {
				this.listData.splice(index, 1)
			},
			add() {
				var aaa = {
					title: "本校区",
					expansion: true,
					type: 'primary',
					child: [],
				}
			  this.listData.push(aaa)
			  },

			//
			//   // 移除 所有项的 编辑效果
			//     this.listData.forEach((item,i)=>{
			//         item.edit = false;
			//     });
			//
			//     // 给最后一项加上编辑效果
			//   this.listData[this.listData.length-1].edit = true;
			//
			// },
			update(e, index) {
				let temp = this.listData[index];
				temp.edit = !temp.edit;
				// 移除 其他项的 编辑效果
				if (temp.edit) {
					this.listData.forEach((item, i) => {
						if (i !== index) {
							item.edit = false;
						}
					})
				}
				// this.$set(this.listData,index,temp)
				this.listData.splice(index, 1, temp)
			},
			addChild(index) {
				// console.log(index)
				let temp = this.listData[index];
				console.log(temp)
				temp.child.push({
					title: "新增的子项",
					child: [],
				});
				temp.expansion = true;
				temp.child.forEach((item, i) => {
					item.edit = false;
				});
				temp.child[temp.child.length - 1].edit = true;
				this.listData.splice(index, 1, temp)
			},
			confirmUpdate(e, index) {
				let temp = this.listData[index];
				temp.edit = false;
				temp.title = e.target.previousSibling.value; // 找到 按钮前面的  input元素并获取值
				// this.$set(this.listData,index,temp)
				this.listData.splice(index, 1, temp)
			}
		}
	}
</script>

<style lang="less" scoped>
.ggg_color{
    background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
}
	.color-blue {
		color: #7cc0ff !important;
	}

	a {
		color: white;
		text-decoration: none;
		transition: all 0.5s;
	}

	button {
		border: none;
		background: #e7f5f8;
		padding: 2px;
		box-sizing: border-box;
		color: #5d90c0;
		margin-left: 5px;
	}

	ul {
		padding: 0;
		margin: 0;
	}

	.primary-menu {
		position: relative;
		margin-bottom: 10px;

		&>a {
			background-color: #A7C4D7;
			background-image: linear-gradient(120deg, red 10%, #bde9f8 70%);
			background-size: 100% 100%;
			padding: 10px;
			box-sizing: border-box;
			border-radius: 3px;
			display: inline-block;
			width: 100%;
		}

		.btn-group {
			position: absolute;
			top: 10px;
			right: 10px;
			height: 100%;
			/*button{*/
			/*border:none;*/
			/*background: #e7f5f8;*/
			/*padding: 2px;*/
			/*box-sizing: border-box;*/
			/*color: #1879ff;*/
			/*}*/
		}

		ul {
			padding-left: 20px;

			li {
				position: relative;
	margin-top: 10px;

				a {
					color: black;
					width: 100%;
					display: inline-block;
					padding: 10px;
					box-sizing: border-box;

					&:hover {
						color: #7bbdbc !important;
						background-color: rgba(228, 228, 228, 0.35);
					}
				}

				ul {
					margin-top: 15px;
				}

				/*.btn-group {*/
				/*position: absolute;*/
				/*top: 0;*/
				/*right: 15px;*/
				/*}*/
			}
		}
	}
</style>
